import { ChangeEvent, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import useQuery from 'src/hook/useQuery'
import Button from 'src/component/Button';
import Checkbox from 'src/component/Checkbox';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import { Page } from 'src/constant/Page';
import Bar from './component/Bar';
import { signup } from 'src/service/userService';
import { dispatch } from 'src/redux/store';
import { openSnackbar } from 'src/redux/uiSlice';
import style from './Register.module.scss';

type RegistrationForm = {
  uMobile: string,
  uMail: string,
  uPwd: string,
  confirmPassword: string
  uName: string,
  uCode: string
}

const Register = () => {
  // const { t } = useTranslation();
  const navigate = useNavigate();
  const [hasRead, setHasRead] = useState<boolean>(false);
  const methods = useForm<RegistrationForm>();
  const query = useQuery<{ invitation?: string }>();

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setHasRead(event.target.checked);
  };

  const onClickSignIn = () => {
    navigate(Page.SignIn);
  };

  const onSubmit = (data: RegistrationForm) => {
    if (data.uPwd !== data.confirmPassword) {
      methods.setError('confirmPassword', {}, { shouldFocus: true });
      return;
    }

    signup(data)

      .then((res) => {
        if (res.success) {
          navigate(Page.Verification, { state: { uMail: data.uMail } })
        } else {
          dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
        }
      }

      ).catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
  };

  return (
    <>
      <Bar />
      <Form className={style.self} methods={methods} onSubmit={onSubmit}>
        <div className={style.head}>注册</div>
        <div className={style.back}>
          <div>已有账号?</div>
          <Button appearance="text" onClick={onClickSignIn} type="button">
            登入
          </Button>
        </div>
        <div className={style.input}>
          <FormInput
            name="uMobile"
            label="行动电话号码"
            type="number"
            asterisked
            required
          />
        </div>
        <div className={style.input}>
          <FormInput
            name="uMail"
            label="Email 地址"
            type="email"
            asterisked
            required
          />
        </div>
        <div className={style.input}>
          <FormInput
            name="uPwd"
            label="密码"
            type="password"
            asterisked
            required
          />
        </div>
        <div className={style.input}>
          <FormInput
            name="confirmPassword"
            label="确认密码"
            type="password"
            asterisked
            required
          />
        </div>
        <div className={style.input}>
          <FormInput name="uName" label="显示名称" type="string" />
        </div>
        <div className={style.input}>
          <FormInput
            name="uCode"
            label="邀请码"
            type="string"
            readOnly={query.invitation != null}
            defaultValue={query.invitation}
          />
        </div>
        <div className={style.checkbox}>
          <Checkbox
            checked={hasRead}
            onChange={handleChange}
            label="我已阅读并同意服务条款与隐私权政策"
            asterisked
          />
        </div>
        <div className={style.submitButton}>
          <Button size="large" type="submit" disabled={!hasRead}>
            注册
          </Button>
        </div>
      </Form>
    </>
  );
};

export default Register;
